<template>
	<view>
		<u-popup  v-model="teampopshow" mode="bottom" width="100%" ref="auth" :closeable="true" :mask-close-able="false" :custom="true" :mask-click="false" @close="closeteam">
            <view class="popone">
                <text class="xuantit">
                    添加团队人员
                </text>
                <view class="addtuan">
                    <view class="aditem">
                        <text class="addname">姓名</text>
                        <u-input style="flex: 1;" v-model="from.realname" type="text" placeholder='请输入姓名' />
                    </view>
                    <view class="aditem">
                        <text class="addname">手机号</text>
                        <u-input style="flex: 1;" v-model="from.mobile" type="text" placeholder='请输入手机号' />
                    </view>
                    <view class="aditem" @click="quanshow=true">
                        <text class="addname">权限</text>
                        <text class="adaval">{{ group_name?group_name:'请选择权限' }}</text>
                        <image class="comm_icon_next" src="@/pages_client/static/img/comm_icon_next.png" />
                    </view>
                </view>
                <!-- <view class="tian">
                    <text class="tname">添加赠送商品</text>
                    <view class="tianbtn" @click="getkucun">添加</view>
                </view>
                <scroll-view class="menlist" scroll-y>
                    <view class="menitem" v-for="(item,index) in 3" :key="index">
                        <image class="tu" :src="ossThree('/uploads/20250404/a6740382ebb9492d9ed8c12c1e42d198.png')" />
                        <view class="menone">
                            <view class="menhead">
                                <text class="name">东方蓉妍(天明路店)</text>
                            </view>
                            <view class="menhead mennav">
                                <text class="ju">￥19.9</text>
                                <u-number-box class="ml" v-model="value"></u-number-box>
                            </view>
                        </view>
                    </view>
                </scroll-view> -->
                <view class="menbot">
                    <view class="mbots" @click="getxuanmen">确认添加</view>
                </view>
            </view>
        </u-popup>

        <view class="select">
            <u-select style="--u-select-header-bg-color: #ffffff;" v-model="quanshow" :list="quanlist" @confirm="confirm"></u-select>
        </view>

        <!-- 缴纳技术费 -->
        <u-popup  v-model="jishushow" mode="center" width="70%" ref="auth" :closeable="true" :mask-close-able="false" :custom="true" :mask-click="false" @close="jishushow=false">
          <view class="jishupop">
            <text class="jiname">缴纳技术服务费</text>
            <text class="jianum">￥{{ jiinfo.money }}</text>
            <text class="jiamiao">{{jiinfo.text}}</text>
            <view class="kaobtn">
                <view class="btns" @click="kaolv">考虑一下</view>
                <view class="btns bjaio" @click="getjiaofei">缴费</view>
            </view>
          </view>
        </u-popup> 
	</view>
</template>

<script>
	export default {
		name: 'AddTeamPop',
		props: {
			teampopshow: {
				type: Boolean,
				default: false
			},

		},
		data() {
			return {
                quanshow:false,
                name: '',
                quanlist: [
					// {
					// 	value: '1',
					// 	label: '江'
					// },
					// {
					// 	value: '2',
					// 	label: '湖'
					// }
				],
                value: 1,
                jishushow:false,
                from:{
					realname:'',
					mobile:'',
					group_id:''
				},
                group_name:'',
                jiinfo:{
                    money:1000,
                    text:''
                }
			};
		},
		created() {
			this.getjibie();//获取级别
		},
		mounted() {

		},
		methods: {
            async getjibie(){
                let res = await this.$u.api.getTeamGroup({
                });
                let shuzu = []
                let data = res
                for(let i in data){
                    let a = {}
                    a.value = data[i].id
                    a.label = data[i].name
                    shuzu.push(a)
                }
                this.quanlist = shuzu
            },
            closeteam(){
                this.$emit("closeteam")
            },
            async getxuanmen(){
                if(!this.from.realname){
                    this.$u.toast("请输入姓名");
                    return;
                }
                if(!this.from.mobile){
                    this.$u.toast("请输入手机号");
                    return;
                }
                let res = await this.$u.api.addTeamUser({
                	realname:this.from.realname,
                    mobile:this.from.mobile,
                    group_id:this.from.group_id
                });
                //  this.$u.toast("添加成功");
                this.jiinfo = res
                 this.jishushow = true
                 
                // this.$emit("getxuanmen")
            },
            getkucun(){
                this.navrouter("/pages_client/twoPage/KucunShop");
            },
            confirm(e){
                console.log(e)
                this.from.group_id = e[0].value
                this.group_name = e[0].label
            },
            kaolv(){
                this.jishushow = false
                this.closeteam()
            },
            async getjiaofei(){
                //交费1000
                let res = await this.$u.api.getOrderByTeam({
                	order_id:this.jiinfo.order_id
                });
                this.zhifu(res)
            },
            async zhifu(res){
                let that = this
                uni.requestPayment({
                    appId: res.appid,
                    nonceStr: res.nonceStr,
                    package: res.package,
                    paySign: res.paySign,
                    signType: res.signType,
                    timeStamp: res.timeStamp,
                    success: (e) => {
                        console.log(e)
                        uni.showToast({
                            title: '支付成功',
                            icon: 'success',
                            duration: 2500,
                        })
						setTimeout(() => {
							that.jishushow = false
                            this.$emit("getxuanmen")
                            // that.$emit("paysuccess")
						}, 1000);
                    },
                    fail: (e) => {
                        console.log(e)

                        this.$u.toast("支付失败");
                        // uni.switchTab({ url: '/pages/tabbar/my' })
                        // uni.showModal({
                        //     content: "支付失败,原因为: " + e.errMsg,
                        //     showCancel: false
                        // })
                    }
                })
			}

		}
	};
</script>

<style lang="scss" scoped>
    /deep/.u-drawer-bottom{
        background-color: transparent;
    }
    /deep/ .select .u-drawer-bottom{
        background-color: #fff !important;
    }
	.popone{
        width: 100%;
        // padding: 30rpx;
        background: #F5F5F5;
        border-radius: 20rpx 20rpx 0rpx 0rpx;
        .addtuan{
            display: flex;
            flex-direction: column;
            padding: 0 30rpx;
            .aditem{
                background: #FFFFFF;
                border-radius: 20rpx;
                padding: 10rpx 30rpx;
                display: flex;
                flex-direction: row;
                align-items: center;
                margin-bottom: 25rpx;
                min-height: 100rpx;

                .addname{
                    font-weight: bold;
                    font-size: 28rpx;
                    color: #333333;
                    display: inline-block;
                    width: 120rpx;
                }
                .comm_icon_next{
                    width: 24rpx;
                    height: 24rpx;
                    margin-left: auto;
                }
            }
            
        }
        .xuantit{
            font-weight: bold;
            font-size: 32rpx;
            color: #222222;
            display: block;
            text-align: center;
            padding: 30rpx 30rpx 40rpx;
        }
        .tian{
            display: flex;
            flex-direction: row;
            margin: 20rpx 30rpx;
            align-items: center;
            .tname{
                font-weight: bold;
                font-size: 32rpx;
                color: #333333;
            }
            .tianbtn{
                margin-left: auto;
                width: 200rpx;
                height: 68rpx;
                background: #52443B;
                border-radius: 16rpx 16rpx 16rpx 16rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                font-weight: bold;
                font-size: 28rpx;
                color: #FFFFFF;
            }
        }
        .menlist{
            max-height: 500rpx;
            
            .menitem{
                display: flex;
                flex-direction: row;
                align-items: center;
                background: #FFFFFF;
                border-radius: 24rpx;
                padding: 25rpx;
                margin: 0 30rpx 20rpx;
                .tu{
                    width: 180rpx;
                    height: 180rpx;
                    margin-right: 20rpx;
                    border-radius: 20rpx;
                }
                .menone{
                    display: flex;
                    flex-direction: column;
                    width: 68%;
                    height: 100%;
                    .menhead{
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        .name{
                            font-weight: bold;
                            font-size: 32rpx;
                            color: #272727;
                        }
                        .yingye{
                            font-weight: 500;
                            font-size: 26rpx;
                            color: #24B924;
                        }
                        .yingtime{
                            font-weight: 500;
                            font-size: 26rpx;
                            color: #333333;
                            display: inline-block;
                            margin-left: 18rpx;
                        }
                        .icon_dw{
                            width:22rpx;
                            height: 24rpx;
                            margin-right: 8rpx;

                        }
                        .ju{
                            font-weight: 500;
                            font-size: 28rpx;
                            color: #1A1A1A;
                        }
                        .juli{
                            margin-left: 30rpx;
                            font-weight: 500;
                            font-size: 24rpx;
                            color: #999999;
                            display: inline-block;
                            max-width: 70%;
                        }
                    }
                    .mennav{
                        margin-top: 55rpx;
                    }
                }
            }
        }
        .icon_dz_xz_s{
            margin-left: auto;
            width: 40rpx;
            height: 40rpx;
        }
    }
    .menbot{
        height: 110rpx;
        background: #FFFFFF;
        display: flex;
        flex-direction: row;
        align-items: center;
        .mbots{
            height: 90rpx;
            background: #52443B;
            border-radius: 16rpx;
            width: 94%;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 500;
            font-size: 28rpx;
            color: #FFFFFF;
        }
    }

    .jishupop{
        width: 100%;
        // height: 420rpx;
        background: #FFFFFF;
        border-radius: 24rpx;
        padding: 30rpx 30rpx 40rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        // justify-content: center;
        
        .jiname{
            font-weight: bold;
            font-size: 36rpx;
            color: #1A1A1A;
            margin: 30rpx;
            display: block;
            text-align: center;
            margin: 0rpx 0 30rpx;
        }
        .jianum{
            font-weight: bold;
            font-size: 40rpx;
            color: #666666;
            display: block;
            margin-bottom: 20rpx;
        }
        .jiamiao{
            font-weight: 500;
            font-size: 28rpx;
            color: #666666;
            display: block;
            text-align: center;
        }
        .kaobtn{
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            margin-top: 50rpx;
            .btns{
                width: 46%;
                height: 78rpx;
                background: #F3F3F3;
                border-radius: 16rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                font-weight: 500;
                font-size: 28rpx;
                color: #1A1A1A;
            }
            .bjaio{
                background: #52443B;
                color: #fff;
            }
        }
    }
    /deep/.u-drawer-bottom{
		background-color: #fff !important;
	}
</style>
<style>
.u-select__header{
        background-color: #fff;
    }
    .u-select{
        background-color: #fff;
    }
</style>
